<template>
  <el-row class="cadbuttongroup" type="flex">
    <el-col :span="6">
           <el-button plain type="primary" @click="handleUpload"> <i class="custom-icon el-icon-upload2">
              <div> <input class="upload" type="file" multiple hidden ref="upload"  @change="handleUploadSuccess"></div>
           </i>
           
           </el-button>
    </el-col>
    <el-col :span="6">
      <el-button plain type="primary" @click="handleInitView">
        <i class="custom-icon el-icon-house"></i>
      </el-button>
    </el-col>
    <el-col :span="6">
      <el-button plain type="primary" @click="handleClear">
        <i class="custom-icon el-icon-delete"></i>
      </el-button>
    </el-col>
    <el-col :span="6">
      <el-button plain type="primary" @click="handleShowTree">
        <i class="custom-icon el-icon-s-fold"></i>
      </el-button>
    </el-col>
    <el-col :span="6">
      <el-button plain type="primary" @click="handleShowAtt">
        <i class="custom-icon el-icon-s-unfold"></i>
      </el-button>
    </el-col>
    <el-col :span="6">
      <el-dropdown @command="handleCommand" trigger="click">
        <el-button plain type="primary">
          <i class="custom-icon el-icon-view"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item :command="1">
            <i class="el-icon-right">正视</i>
          </el-dropdown-item>
          <el-dropdown-item :command="2">
            <i class="el-icon-back">后视</i>
          </el-dropdown-item>
          <el-dropdown-item :command="3">
            <i class="el-icon-top">仰视</i>
          </el-dropdown-item>
          <el-dropdown-item :command="4">
            <i class="el-icon-bottom">俯视</i>
          </el-dropdown-item>
          <el-dropdown-item :command="5">
            <i class="el-icon-sort-up">左视</i>
          </el-dropdown-item>
          <el-dropdown-item :command="6">
            <i class="el-icon-sort-down">右视</i>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-col>
  </el-row>
</template>

<script>
import { FileLoader } from "@/utils/load/FileLoader";
import ComponentSignals from "@/utils/componentSignals";

export default {
  name: "buttonGroup",
  data: function() {
    return {
      fileList: []
    };
  },
  methods: {
    //eslint-disable-next-line no-unused-vars
    handleUpload() {
      this.$refs.upload.dispatchEvent(new MouseEvent("click"));
    },
    handleUploadSuccess(e) {
      let files = e.target.files;
      const load = new FileLoader();
      load.loadFiles(files);
    },
    handleInitView() {
      ComponentSignals.initView.dispatch();
    },
    handleClear() {
      ComponentSignals.clear.dispatch();
    },
    handleShowTree() {
      ComponentSignals.showTree.dispatch();
    },
    handleShowAtt() {
      ComponentSignals.showAttribute.dispatch();
    },
    handleCommand(command) {
      ComponentSignals.perspectiveSet.dispatch(command);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.cadbuttongroup {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translate(-50%, 0);
  z-index: 2;
}

.custom-icon {
  font-size: 18px;
}
</style>
